<template>
  <div>
    <el-form ref="searchForm" :model="searchForm" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="人员名称">
            <el-input
                v-model="searchForm.userName"
                placeholder="请输入人员名称"
            />
          </el-form-item>
        </el-col>
        <el-col :offset="6" :span="6" class="text-right">
          <el-button
              icon="iconfont iconxianxing_sousuo"
              type="primary"
              @click="handleSearch"
          >
            查询
          </el-button>
          <el-button
              icon="iconfont iconxianxing_zhongzhi"
              @click="handleReset"
          >
            重置
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <Table
        ref="table"
        :current-page="page"
        :header-data="tableHeader"
        :index="false"
        :loading="loading"
        :page-size="limit"
        :row-key="'userId'"
        :selection="true"
        :table-data="tableData"
        :total="total"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @now-page="handlePage"
        @now-size="handleSize"
        @table-sort="handleSort"
    />
  </div>

</template>

<script>
import addTable from '@/mixins/addtable'
import { getUsersList } from "@/views/manList/api";
import { getAdmins } from "./api";

export default {
  name: 'Manager',
  mixins: [addTable],
  props: {
    warehouseInfo: {
      type: Object,
      default: () => {
      }
    },
  },
  data() {
    return {
      searchForm: {
        userName: '',
      },
      adminsList: [],
      tableHeader: []
    }
  },
  watch: {
    warehouseInfo: {
      handler() {
        this.getTableData()
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.tableHeader = [
      {
        prop: 'userName',
        label: '人员名称',
        sortable: false,
        overflow: true,
        width: 180,
        align: 'left'
      },
      {
        prop: 'unitName',
        label: '所属部门',
        sortable: false,
        overflow: true,
        align: 'left'
      },
    ]
  },
  methods: {
    getTableData() {
      this.loading = true
      this.getTableParams()
      getUsersList(this.tableParams)
         .then(async (res) => {
           if (!res) return
           const { data, pageInfo } = res
           this.loading = false
           this.tableData = data
           this.total = pageInfo.total
           const result = await getAdmins({ warehouseId: this.warehouseInfo.id })
           this.toggleRowSelection(result.data)
         })
         .catch((err) => {
           console.log('TCL: getTableData -> err', err)
         })
    },
    handleSelectionChange(val) {
      console.log(val)
      this.$emit('selectList', val)
    },
    toggleRowSelection(data) {
      console.log(data)
      this.$nextTick(() => {
        data.forEach(row => {
          const obj = this.tableData.find(item => {
            return row.userId * 1 === item.userId * 1;
          })
          this.$refs.table.$refs.elTable.toggleRowSelection(obj, true)
        })
      })
    },
    clearSelection() {
      this.$refs.table.$refs.elTable.clearSelection();
    }
  }
}
</script>
